<template>
	<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
		<div>
			<el-select filterable @change="changeProjectCode" v-model="localQueryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" clearable>
				<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
			</el-select>
			<el-select filterable @change="queryList" v-model="localQueryParams.wtBrandName" multiple collapse-tags collapse-tags-tooltip  class="zs-select-md zs-space-right-sm" placeholder="品牌" clearable remote remote-show-suffix :remote-method="searchbrandList" @focus="brandFirstBizTypes.length == 0 ? getBrandNameDropdown() : ''">
				<el-option v-for="item in brandFirstBizTypes" :key="item.wtBrandName" :label="item.wtBrandName" :value="item.wtBrandName" />
			</el-select>
			<el-select filterable @change="queryList" v-model="localQueryParams.sourceType" class="zs-select-md zs-space-right-sm" placeholder="欠款口径">
				<el-option v-for="item in arrearsTypeDropdownRespList" :key="item.code" :label="item.name" :value="item.code" />
			</el-select>
			<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
				<template #reference>
					<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': localQueryParams.chargetypeIdList.length > 0 || localQueryParams.startMonth || localQueryParams.endMonth || judgeNumBoolean(localQueryParams.relationCustomer) || judgeNumBoolean(localQueryParams.isSingle) || judgeNumBoolean(localQueryParams.isLitigation) || localQueryParams.bizMode.length > 0 || localQueryParams.contractsCode || localQueryParams.contractsStatus.length > 0 }">
						<el-icon>
							<MoreFilled />
						</el-icon>
					</el-button>
				</template>
				<template #default>
					<el-cascader class="zs-select-md zs-space-right-sm" v-model="localQueryParams.chargetypeIdList" :options="chargeTypeList" placeholder="费项类型" :props="cascaderProps" @change="changeCharge" collapse-tags collapse-tags-tooltip clearable filterable :teleported="false" />
					<el-date-picker class="zs-space-right-sm" v-model="localQueryParams.startMonth" type="month" value-format="YYYY-MM" placeholder="权责开始月" clearable :disabled-date="disabledDateStart" @change="queryList" :teleported="false" />
					<el-date-picker class="zs-space-right-sm" v-model="localQueryParams.endMonth" type="month" value-format="YYYY-MM" placeholder="权责结束月" clearable :disabled-date="disabledDateEnd" @change="queryList" :teleported="false" />
					<el-select @change="queryList" v-model="localQueryParams.relationCustomer" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="是否关联方" clearable :teleported="false">
						<el-option label="非关联方" :value="0" />
						<el-option label="关联方" :value="1" />
					</el-select>
					<el-select @change="queryList" v-model="localQueryParams.isSingle" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="是否单列" clearable :teleported="false">
						<el-option label="非单列" :value="0" />
						<el-option label="单列" :value="1" />
					</el-select>
					<el-select @change="queryList" v-model="localQueryParams.isLitigation" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="是否诉讼" clearable :teleported="false">
						<el-option label="非诉讼" :value="0" />
						<el-option label="诉讼" :value="1" />
					</el-select>
					<el-select @change="queryList" v-model="localQueryParams.bizMode" multiple class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="资产类型" collapse-tags collapse-tags-tooltip clearable :teleported="false">
						<el-option v-for="item in bizModeList" :key="item.bizMode" :label="item.bizMode" :value="item.bizMode" />
					</el-select>
					<!-- <el-select v-model="localQueryParams.contractsCode" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="合同编号" clearable filterable @change="queryList" :teleported="false">
						<el-option v-for="item in contractsCodeList" :key="item.contractsCode" :label="item.contractsCode" :value="item.contractsCode" />
					</el-select> -->
					<el-input v-model="localQueryParams.contractsCode" class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="合同编号" clearable @blur="queryList" />
					<el-select v-model="localQueryParams.contractsStatus" class="zs-select-md zs-space-right-sm zs-space-top-sm" multiple filterable collapse-tags collapse-tags-tooltip placeholder="合同状态" clearable @change="queryList" :teleported="false">
						<el-option v-for="item in contractsStatusList" :key="item.contractsStatus" :label="item.contractsStatus" :value="item.contractsStatus" />
					</el-select>
				</template>
			</el-popover>
			<el-button @click="queryList" class="zs-btn-plain">查询</el-button>
		</div>
		<div>
			<el-button :class="{ 'zs-btn-plain': localQueryParams.type != 1, 'zs-btn-primary': localQueryParams.type == 1 }" @click="handleSwitch(1)">租费欠款</el-button>
			<el-button :class="{ 'zs-btn-plain': localQueryParams.type != 2, 'zs-btn-primary': localQueryParams.type == 2 }" @click="handleSwitch(2)">保证金欠款</el-button>
			<el-button :class="{ 'zs-btn-plain': localQueryParams.type != 0, 'zs-btn-primary': localQueryParams.type == 0 }" @click="handleSwitch(0)">全部欠款</el-button>
			<el-button class="zs-btn-plain" @click="handleDownload">
				<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
			</el-button>
		</div>
	</div>
</template>

<script setup>
	import { getBrandNameByNameDropdownApi, getBizModeDropdownApi, getDropDownListApi, getContractsStatusDropdownApi } from '@/api/SpecialReport/receivable';
	import detailApi from '@/api/Manage/Business/detailPages';
	import { getArrearsContractsExportApi } from '@/api/SpecialReport/netReceipts';
	import { downloadNewFile } from '@/utils/publicUtils';
	import { reactive, ref } from 'vue';
	const props = defineProps({
		queryParams: {
			type: Object,
			required: true,
		},
	});

	const emit = defineEmits(['queryList']);

	const localQueryParams = reactive({ ...props.queryParams });

	const queryList = () => {
		emit('queryList', localQueryParams);
	};

	//欠款口径
	const arrearsTypeDropdownRespList = ref([
		{ code: 2, name: '考核口径' },
		{ code: 0, name: '账单口径' },
		{ code: 1, name: '权责口径' },
	]);

	const cascaderProps = { multiple: true, label: 'feeItemName', value: 'feeItemId', children: 'feeItemNewestRespList', emitPath: true };
	const projectList = ref([]);
	const bizModeList = ref([]);
	const contractsStatusList = ref([]);
	function getBrandfirstBizType() {
		//集合
		getDropDownListApi().then(res => {
			if (res.data.code != 200) return;
			projectList.value = res.data.data.projectDropdownRespList || []; //项目
			contractsStatusList.value = res.data.data.contractsStatusDropdownList || []; //合同状态
		});

		// 资产类型
		getBizModeDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				bizModeList.value = resData.data;
			}
		});
		// 合同状态
		getContractsStatusDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				contractsStatusList.value = resData.data;
			}
		});
	}

	//费项
	const chargeTypeList = ref([]);
	const getChargeList = async () => {
		let res = await detailApi.getChargeListApi(localQueryParams.projectCode);
		chargeTypeList.value = res.data.data || [];
		initChargeTypeCode();
	};

	// 品牌
	const brandFirstBizTypes = ref([]);
	const getBrandNameDropdown = (wtBrandName) => {
		getBrandNameByNameDropdownApi({ projectCode: localQueryParams.projectCode, wtBrandName }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				brandFirstBizTypes.value = resData.data;
			}
		});
	};

	const searchbrandList = query => {
		console.log(query)
		query.length > 0 && getBrandNameDropdown(query);
	};

	// 合同编号
	// const contractsCodeList = ref([]);
	// const getContractsCodeDropdown = () => {
	// 	getContractsCodeDropdownApi({ projectCode: localQueryParams.projectCode }).then(res => {
	// 		let resData = res.data;
	// 		if (resData.errorCode == 200) {
	// 			contractsCodeList.value = resData.data;
	// 		}
	// 	});
	// };

	//切换费项
	const changeCharge = (data) => {
		let chargetypeParentIdList = [...new Set(data.map(one => one[0]))]
		let chargetypeIdList = [...new Set(data.map(one => one[1]))]
		localQueryParams.chargetypeParentIdList = chargetypeParentIdList;
		localQueryParams.chargetypeIdList = chargetypeIdList;
	};

	//切换项目
	const changeProjectCode = () => {
		localQueryParams.wtBrandName = '';
		localQueryParams.contractsCode = '';
		localQueryParams.chargetypeParentIdList = [];
		localQueryParams.chargetypeIdList = [];
		getBrandNameDropdown();
		getChargeList();
		// getContractsCodeDropdown();
		queryList();
	};

	// 点击切换tab
	function handleSwitch(type) {
		localQueryParams.type = type;
		initChargeTypeCode();
	}

	//导出
	const handleDownload = async () => {
		let params = Object.assign({}, localQueryParams);
		params.brandId = params.brandId || 'all';
		params.firstFormat = params.firstFormat || 'all';
		const fileName = `收缴率报表.xls`;
		let fileData = await getArrearsContractsExportApi(params);
		downloadNewFile(fileData.data, fileName);
	};

	//费项类型根据tab默认选择
	const initChargeTypeCode = () => {
		localQueryParams.chargetypeParentIdList = [];
		localQueryParams.chargetypeIdList = [];
		chargeTypeList.value.map(item => {
			//租金 选中租金+物业费
			if (localQueryParams.type == 1 && item.filterType == 0) {
				localQueryParams.chargetypeParentIdList = localQueryParams.chargetypeParentIdList.concat(item.feeItemId);
				localQueryParams.chargetypeIdList = localQueryParams.chargetypeIdList.concat(item.feeItemNewestRespList.map(charge => charge.feeItemId));
			}
			//保证金
			if (localQueryParams.type == 2 && item.filterType == 1) {
				localQueryParams.chargetypeParentIdList = [item.feeItemId];
				localQueryParams.chargetypeIdList = item.feeItemNewestRespList.map(charge => charge.feeItemId);
			}
		});
		queryList();
	};

	//时间判断
	const disabledDateStart = date => {
		if (!localQueryParams.endMonth) return false;
		return date.getTime() > new Date(localQueryParams.endMonth).getTime();
	};

	const disabledDateEnd = date => {
		if (!localQueryParams.startMonth) return false;
		return date.getTime() < new Date(localQueryParams.startMonth).getTime();
	};

	const judgeNumBoolean = data => {
		return data || data === 0;
	};

	getChargeList();
	getBrandfirstBizType();
	getBrandNameDropdown();
	// getContractsCodeDropdown();
</script>
